<template>
  <div>
    <div v-if="added.length > 0">
      <el-table
        :data="added"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="商品ID" width="180"></el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="180"
        ></el-table-column>
        <el-table-column label="数量" width="220">
          <!-- :max  加了最大值库存的限定 -->
          <template slot-scope="scope">
            <el-input-number
              size="mini"
              :min="1"
              :max="shopInventory"
              v-model="scope.row.num"
              v-on:input="handleBlur"
              @change="handleChange(scope.row)"
            ></el-input-number>
            <span class="message" v-show="scope.row.num == 10"
              ><i class="el-icon-warning"></i>暂无库存!</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          width="180"
        ></el-table-column>
        <el-table-column label="总价" width="180">
          <template slot-scope="scope">
            {{ scope.row.price * scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="delCommoditys(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-checkbox v-model="checked" @change="instantrebate"
          >满100减10元</el-checkbox
        >
      </div>

      <div style="margin-left: 50px">
        <h2>总价格：{{ couponTotalprice }}</h2>
        <el-button type="danger" @click.native="CLEAR()">清空购物车</el-button>
      </div>
      <div>结算：{{ totalPrice2 }}</div>
    </div>
    <div v-else>
      <h1 style="text-align: center">购物车为空,快去挑选商品吧！</h1>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions, mapState } from "vuex";

export default {
  name: "cart",
  data() {
    return {
      dialogVisible: false,
      result: null,
      input_number_value: 1,
      checkedCommodities: [],
      totalprice2: 0,
      checked: true,
    };
  },
  computed: {
    ...mapGetters(["cartProducts", "totalNum", "totalPrice"]),
    ...mapState(["added", "shopInventory"]),
    totalPrice2() {
      return this.checkedCommodities.reduce((sum, commodity) => {
        return sum + commodity.price * commodity.num;
      }, 0);
    },
    couponTotalprice() {
      if (this.checked) {
        const num = parseInt(this.totalPrice / 100);
        return parseInt(this.totalPrice - 10 * num);
      } else {
        return this.totalPrice;
      }
    },
  },

  methods: {
    ...mapMutations([
      "delCommoditys",
      "clearAllCart",
      "CLEAR",
      "checkAllCommoditiesInCart",
    ]),
    ...mapActions(["numChange"]),
    handleSelectionChange(checkedCommodities) {
      this.checkedCommodities = checkedCommodities;
    },
    dialogVisibleTrue(data) {
      this.dialogVisible = true;
      this.result = data;
    },
    dialogSure() {
      this.delProduct(this.result);
      this.dialogVisible = false;
    },
    handleBlur(value) {
      this.input_number_value = value;
    },
    handleChange(data) {
      data.value = this.input_number_value;
      this.numChange(data);
      console.log(data.value);
    },
  },
};
</script>

<style scoped>
.el-table th > .cell {
  text-align: center;
}
.el-table td > .cell {
  text-align: center;
}
.message {
  color: red;
  font-size: 12px;
}
</style>
